<template>
  <div>
    <ul class="title">
      <router-link
        tag='li'
        v-for="(selects, index) in clothes"
        :key="index" class='item'
        :to="{name: 'detail', params: {id: index}, query: {id: index}}"
      >
        <img class="goodsimg" :src="'https://cdn.bestseller.com.cn' + selects.picurls[0]" alt="">
        <div class="price"><s v-if="selects.discount*10 !== 10">¥{{selects.originalPrice}}</s>  ¥{{selects.price}}   <span v-if="selects.discount*10 !== 10">{{selects.discount*10}}折</span></div>
        <div class="name">{{selects.goodsName}}</div>
        <button class="addcart">加入购车</button>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Mall',
  data () {
    return {
      clothes: []
    }
  },
  created () {
    this.$http.get('https://www.only.cn/api/goods/dmpRecommendGoods?projectName=firstPageHot&brand=one&userId=&brandCode=ONLY')
      .then(resp => {
        this.clothes = resp.data.data
      })
  }
}
</script>
<style lang='scss' scoped>
.title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .item{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 45%;
      margin-bottom: 30px;
      .name{
        width: 168px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        margin-top: 10px;
      }
      .price{
        margin-top: 10px;
        span{
          color:red;
        }
      }
      .addcart{
        border: 1px solid black;
        width: 100px;
        height: 40px;
        background-color: #fff;
        margin-top: 10px;
        font-size: 15px;
      }
    }
    .goodsimg{
      width: 100%;
      height: 300px;
    }
  }
</style>
